<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>投票页面</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <style>
        body {
            background-color: #ffe6e6;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .card {
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        h3 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: bold;
            color: #c0392b;
        }
        .voted-card {
            border: 2px solid #28a745;
            background-color: #eaffea;
        }
        .vote-result {
            text-align: center;
            margin-top: 30px;
            font-size: 20px;
            color: #28a745;
            font-weight: bold;
        }
    </style>
</head>
<body class="p-4">
    <h3>请选择你的心动对象 ❤️</h3>
    <div id="users" class="row justify-content-center"></div>
    <div id="voteResult" class="vote-result"></div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const userId = urlParams.get('user_id');

        let voted = false;

        async function loadUsers() {
            const res = await fetch('/users');
            const users = await res.json();

            const voter = users.find(u => u.id == userId);
            const targets = users.filter(u => u.gender !== voter.gender && u.id != userId);

            const container = document.getElementById('users');
            container.innerHTML = '';

            targets.forEach(u => {
                const div = document.createElement('div');
                div.className = 'col-xs-6 col-sm-4';  // 两列间隔更好看
                div.innerHTML = `
                    <div class="card h-100" id="card-${u.id}">
                        <div class="card-body">
                            <h5 class="text-primary">编号：${u.number}</h5>
                            <p><strong>姓名：</strong>${u.name}</p>
                            <p><strong>性别：</strong>${u.gender}</p>
                            <p><strong>工作单位：</strong>${u.worker}</p>
                            <div class="text-center mt-3">
                                <button class="btn btn-danger vote-btn" onclick="vote(${u.id}, '${u.name}')">投票给TA</button>
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(div);
            });
        }

        async function vote(targetId, targetName) {
            if (voted) return;

            const confirmed = confirm(`确定要投票给「${targetName}」吗？此操作不可更改。`);
            if (!confirmed) return;

            const res = await fetch('/vote', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ voter_id: userId, target_id: targetId })
            });

            const json = await res.json();

            if (res.ok) {
                voted = true;

                // 高亮目标卡片
                document.getElementById(`card-${targetId}`).classList.add('voted-card');

                // 禁用所有按钮
                document.querySelectorAll('.vote-btn').forEach(btn => {
                    btn.disabled = true;
                });

                // 显示提示
                document.getElementById('voteResult').innerText = `你已投给「${targetName}」，感谢你的参与！`;

            } else {
                alert(json.error || "投票失败");
            }
        }

        loadUsers();
    </script>
</body>
</html>
